<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="add_business" v-show="!preViewVisible">
    <div class="steps">
      <el-steps :active="active" style="width: 100%" align-center>
        <el-step title="基本信息填写" />
        <el-step title="业务地图配置" />
        <el-step title="完成" />
      </el-steps>
    </div>
    <div class="upload" v-show="active === 1">
      <div class="upload_content">
        <el-form size="small" label-width="120">
          <el-form-item label="业务场景名称：" required>
            <el-input style="width: 400px" v-model="addForm.name" placeholder="请输入场景名称" />
          </el-form-item>
          <el-form-item label="业务场景描述：" required>
            <el-input style="width: 400px" v-model="addForm.description" placeholder="请输入场景描述" />
          </el-form-item>
          <el-form-item label="使用目的：">
            <el-input v-model="addForm.purpose" style="width: 400px" :rows="2" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="upload_list" v-show="active === 2" v-loading="uploadLoading" element-loading-text="数据提交中...">
      <BusinessMap @handleData="handleData" />
    </div>
    <div class="upload_success" v-show="active === 3">
      <div class="upload_success_message">
        <el-icon size="48" color="#67C23A"><CircleCheck /></el-icon>
        <div>场景配置成功！</div>
        <!-- <div>
          <el-link @click="preview">查看详情</el-link>
        </div> -->
      </div>
    </div>
    <div class="option_btn">
      <el-button size="small" type="primary" v-show="active === 1" @click="step('next')">下一步</el-button>
      <el-button size="small" type="primary" v-show="active === 2" @click="step('pre')">上一步</el-button>
      <el-button size="small" type="primary" v-show="active === 2" @click="saveData">保存</el-button>
      <el-button size="small" type="primary" v-show="active === 3" @click="finish">完成</el-button>
      <el-button size="small" v-show="active !== 3" @click="cancel">取消</el-button>
    </div>
  </div>
  <!-- <BusinessDetail  v-if="preViewVisible" @goback="preViewVisible = false" /> -->
</template>
<script  setup name="AddBusiness">
import BusinessMap from './BusinessMap.vue';
import BusinessDetail from './BusinessDetail.vue';
import { addBusiness } from '@/api/metaData/index';
const emit = defineEmits(['handleEvent']);
//场景信息form
const addForm = ref({
  name: '',
  description: '',
  purpose: ''
});
//场景地图数据
const businessMapData = ref([]);
//step
const active = ref(1);
//查看详情
const preViewVisible = ref(false);
const uploadLoading = ref(false);
// 上一步  下一步
const step = (type) => {
  if (type === 'next') {
    if (active.value === 1) {
      //数据校验
      if (!addForm.value.name) {
        ElMessage({ showClose: true, message: '请输入场景名称', type: 'warning' });
        return;
      }
      if (!addForm.value.description) {
        ElMessage({ showClose: true, message: '请输入场景描述', type: 'warning' });
        return;
      }
      active.value++;
    }
  } else {
    active.value--;
  }
};
//取消
const cancel = () => {
  emit('handleEvent', { component: 'addBusines' });
};
//场景地图数据
const handleData = (data) => {
  if (data?.data) {
    businessMapData.value = data?.data;
  }
};
//保存
const saveData = () => {
  //数据校验
  let validate = true;
  let cardName = '';
  if (businessMapData.value.length > 0) {
    businessMapData.value.forEach((el) => {
      if (el?.databases.length === 0) {
        validate = false;
        cardName = el?.name;
      }
    });
  } else {
    ElMessage({ showClose: true, message: `请配置场景地图！`, type: 'warning' });
    return;
  }
  if (!validate) {
    ElMessage({ showClose: true, message: `${cardName} 需至少选择一个库类型！`, type: 'warning' });
    return;
  }
  // 数据提交
  uploadLoading.value = true;
  const cards = businessMapData.value.map((el) => {
    let databases = [];
    if (el.databases.length > 0) {
      databases = el.databases.map((item) => {
        return item.id;
      });
    }
    return { name: el.name, description: el?.description, purpose: el?.purpose, databaseIds: databases.toString(), sort: el.index };
  });
  const params = {
    name: addForm.value.name,
    description: addForm.value.description,
    purpose: addForm.value.purpose,
    parentId:0,
    sort:0,
    children: [...cards]
  };
  addBusiness(params)
    .then((res) => {
      if (res.code === 200) {
        active.value++;
      }
    })
    .finally(() => {
      uploadLoading.value = false;
    });
};
// 完成
const finish = () => {
  emit('handleEvent', { component: 'addBusines' });
};
// 查看详情
const preview = () => {
  preViewVisible.value = true;

};
</script>
<style lang="scss" scoped>
.add_business {
  padding: 10px;
  width: 100%;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  .steps {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
  .upload {
    width: 600px;
    margin-top: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    // min-height: calc(100vh - 251px);
    .upload_content {
      width: 600px;
      // min-height: calc(100vh - 251px);
      // overflow: auto;
    }
  }
  .upload_list,
  .upload_success {
    margin-top: 10px;
    overflow: hidden;
    min-height: calc(100vh - 251px);
    width: 100%;
  }
  .option_btn {
    margin-top: 20px;
  }
  .upload_success {
    margin-top: 10px;
    .upload_success_message {
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      > div:nth-child(2) {
        margin-top: 10px;
      }
      > div:nth-child(3) {
        margin-top: 10px;
      }
    }
  }
  :deep(.el-step__title) {
    font-size: 12px;
  }
}
</style>